	/*
	 *	Utility methos used for UI Theme Selector
	 */
	function toggleCustomTheme () {
		//jQuery('body').toggleClass('custom');
		resizePageLayout();
	};

	function resizePageLayout () {
		var pageLayout = jQuery("body").data("layout");
		if (pageLayout) pageLayout.resizeAll();
	};

	/*
	 *	Define options for all the layouts
	 */
	var pageLayoutOptions = {
		name:					'pageLayout' // only for debugging
	,	resizeWithWindowDelay:	250		// delay calling resizeAll when window is *still* resizing
	//,	resizeWithWindowMaxDelay: 2000	// force resize every XX ms while window is being resized
	,	resizable:				false
	,	slidable:				false
	,	closable:				false
	,	north__paneSelector:	"#outer-north"
	,	center__paneSelector:	"#outer-center" 
	,	south__paneSelector:	"#outer-south" 
	,	south__spacing_open:	0
	,	north__spacing_open:	0
	,	center__onresize: function () {
			// resize ALL the tab-layouts - hidden layouts will ignore this			
			jQuery("#innerPanel").data("layout").resizeAll();
			//jQuery("#tab1").data("layout").resizeAll();
			//jQuery("#tab2").data("layout").resizeAll();
			//jQuery("#tab3").data("layout").resizeAll();
		}
	};

	var tabsContainerLayoutOptions = {
		name:					'tabsContainerLayout' // only for debugging
	,	resizable:				false
	,	slidable:				false
	,	closable:				false
	//,	north__paneSelector:	"#tabbuttons"
	,	center__paneSelector:	"#innerPanel" 
	,	spacing_open:			0
	,	center__onresize: function () {
			// resize ALL the tab-layouts - hidden layouts will ignore this			
			jQuery("#innerPanel").data("layout").resizeAll();
			//jQuery("#tab1").data("layout").resizeAll();
			//jQuery("#tab2").data("layout").resizeAll();
			//jQuery("#tab3").data("layout").resizeAll();
		}
	}; 

	var tabLayoutOptions = {
		name:					'tabPanelLayout' // only for debugging
	,	resizeWithWindow:		false	// required because layout is 'nested' inside tabpanels container
	//,	resizeWhileDragging:	true	// slow in IE because of the nested layouts
	,	resizerDragOpacity:		0.5
	,	north__resizable:		false
	,	south__resizable:		false
	,	north__closable:		false
	,	south__closable:		false
	,	west__minSize:			200
	,	east__minSize:			200
	,	center__minWidth:		400
	,	spacing_open:			10
	,	spacing_closed:			10
	,	contentSelector:		".ui-widget-content"
	,	togglerContent_open:	'<div class="ui-icon"></div>'
	//,	togglerContent_closed:	'<div class="ui-icon"></div>'
	,	west__spacing_closed:		20
    ,	west__togglerLength_closed:	100
	,	west__togglerAlign_closed:	'top'
	,	west__togglerContent_closed:'<span style="color:#000;">M<BR/>E<BR/>N<BR/>U</span>'
	,	west__togglerTip_closed:	'Open & Pin Menu'
	,	west__sliderTip:			'Slide Open Menu'
	//,	west__slideTrigger_open:	'mouseover'
	,	triggerEventsOnLoad:	true // so center__onresize is triggered when layout inits
	,	center__onresize: function (pane, $Pane) {
			//$Pane.find(':ui-accordion').accordion('resize');
			jQuery('*').find(':ui-accordion').accordion('resize');
			//alert('center__onresize '+$Pane.find('.ui-accordion'));
			//jQuery("#innerPanel").data("layout").resizeAll();
		}
	//	after the layout loads, init sidebar-layouts...
	,	onload: function ( layout ) {
			//layout.panes.west.layout( sidebarLayoutOptions );
			//layout.panes.east.layout( sidebarLayoutOptions );
		}
	};

	var sidebarLayoutOptions = {
		name:					'sidebarLayout' // only for debugging
	,	resizeWhileDragging:	true
	,   north__size:			'30%'
	,   south__size:			'30%'
	,	minSize:				100
	,	center__minHeight:		100
	,	spacing_open:			10
	,	spacing_closed:			10
	,	contentSelector:		'.ui-widget-content'
	//,	togglerContent_open:	'<div class="ui-icon"></div>'
	//,	togglerContent_closed:	'<div class="ui-icon"></div>'
	};

	jQuery(document).ready( function() {
		var pageLayout = jQuery('body').layout( pageLayoutOptions ); 
		// first init the tabs inside the center-pane
		// then init the layout that wraps them
		//pageLayout.panes.center
		//	.tabs({
				// using callback addon
		//		show: $.layout.callbacks.resizeTabLayout
				/* OR using a manual/custom callback
				show: function (evt, ui) {
					var tabLayout = jQuery(ui.panel).data("layout");
					if ( tabLayout ) tabLayout.resizeAll();
				}*/
		//	})
			// make the tabs sortable
		//	.find('.ui-tabs-nav').sortable({ axis: 'x', zIndex: 2 }) .end()
			// create the layout to wrap the tab buttons (north) and panels (center)
		//	.layout( tabsContainerLayoutOptions )
		//;
		
		// init inner-tabs in tab #3
		//jQuery('#innerTabs').tabs({
			// resize inner-accordion each time corresponding tab-panel is shown
		//	show: function (evt, ui) { jQuery('*').find(':ui-accordion').accordion('resize');/*jQuery(ui.panel).find(':ui-accordion').accordion('resize');*/}
			
		//});
		// init all the tab-layouts - all use the same options		
		jQuery('#innerPanel').layout( tabLayoutOptions );
		//jQuery('#tab1').layout( tabLayoutOptions );
		//jQuery('#tab2').layout( tabLayoutOptions );
		//jQuery('#tab3').layout( tabLayoutOptions );
		// init ALL accordions (all have .accordion class assigned)
		jQuery('.accordion').accordion({ fillSpace: true });
		/* UI pseudo-classes allow all UI elements to be easily found...
		alert( 'Number of Accordion widgets = '+ jQuery(":ui-accordion").length );
		alert( 'Number of Tabs widgets = '+ jQuery(":ui-tabs").length );
		*/
		//addThemeSwitcher('#outer-north',{ top: '13px', right: '20px' });
		// if a theme is applied by ThemeSwitch *onLoad*, it may change the height of some content,
		// so we need to call resizeLayout to 'correct' any header/footer heights affected
		// call multiple times so fast browsers update quickly, and slower ones eventually!
		// NOTE: this is only necessary because we are changing CSS *AFTER LOADING* (eg: themeSwitcher)
		//setTimeout( resizePageLayout, 1000 ); /* allow time for browser to re-render for theme */
		//setTimeout( resizePageLayout, 5000 ); /* for really slow browsers */
	});
